<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="400" title="添加数据">
        <Form :model="data" :rules="ruleValidate" ref="formCreate" label-position="top">
            <Row :gutter="16">
                <Col :span="12">
                    <FormItem label="代码" prop="code">
                        <Input v-model="data.code"></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="名称" prop="name">
                        <Input v-model="data.name"></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="法定第一计量单位" prop="unit1">
                        <RemoteSelect v-model="data.unit1" url="common/select/unit"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="法定第二计量单位" prop="unit2">
                        <RemoteSelect v-model="data.unit2" url="common/select/unit"></RemoteSelect>
                    </FormItem>
                </Col>
            </Row>

            <FormItem
                    v-for="(item, index) in data.element"
                    :key="index"
                    :label="`序号:${index}`">
                <Row :gutter="16">
                    <Col span="18">
                        <Input type="text" v-model="data.element[index]" placeholder=""></Input>
                    </Col>
                    <Col span="4">
                        <Button @click="handleRemove(index)">删除</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Button type="dashed" long @click="handleAdd" icon="md-add">添加申报要素</Button>
            </FormItem>


        </Form>
        <div slot="footer">
            <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
            <Button type="warning" icon="md-log-out" @click="defaultValue = false">返回</Button>
        </div>
    </IDrawer>
</template>

<script>
    import IDrawerMixins from "../../../../../mixins/iDrawerMixins";
    import IDrawer from "../../../../../components/layout/IDrawer";
    import RemoteSelect from "../../../../../components/form/remoteSelect";
    import IData from "./data";

    export default {
        name: "create",
        components: {RemoteSelect, IDrawer},
        mixins: [IDrawerMixins, IData],
        methods: {
            submit(data) {
                this.validate(data).then(() => {
                    this.loading = true;
                    this.$http.post(`system/dictionary/hs_code`, this.data).then(() => {
                        this.defaultValue = false;
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
